<template>	
	<div >
	        <el-header>
	            <div >
	                <el-row style="text-align: center;min-height: 60px;">
	                    <el-col  :span="3">
	                        <el-image
									style="width: 160px;"
	                                class="brandArea"
	                                src="/logo.png"
	                                :fit="fit"></el-image>
	                    </el-col>
	                    <el-col :span="18">
	                        <el-menu
	                                router="active"
	                                default-active="changeActive"
	                                class="el-menu-demo"
	                                style="position:static;"
	                                mode="horizontal"
									:ellipsis="false"
	                                @select="handleSelect">
	                            <el-row>
	                                <el-col :span="7">
	                                    <el-menu-item style="font: 1.5em sans-serif;" index="home">首页</el-menu-item>
	                                </el-col>

	                                <el-col :span="7">
	                                    <el-menu-item style="font: 1.5em sans-serif;" index="information">资讯</el-menu-item>
	                                </el-col>
	                                <el-col :span="7">
	                                    <el-menu-item style="font: 1.5em sans-serif;" index="publish">发布</el-menu-item>
	                                </el-col>	
	                            </el-row>								
	                        </el-menu>	
	                    </el-col>
						
						<el-col :span="3">
							<div style="text-align: right; margin-top: 30px; font-size: 19px" >
								<router-link :to="{'name':'login'}">登录</router-link> 
								</div>
						</el-col>
	                    
	                </el-row>
					
	            </div>
				
	        </el-header>
			
			<el-divider />
	    </div>
<router-view @change="changeActive"></router-view>
	
	
</template>

<script lang="ts" setup>

	import { ref } from 'vue'
	
	const active = ref(0);
	function changeActive(data){
		active.value = data
	}
	
</script>

<style >
	.img {
		margin-top: 5px;
		margin-left: 15px;
		margin-right: 15px;
	}
	
	ul.el-menu.el-menu--horizontal.el-menu-demo {
		border-bottom: none;
		width: 100%;
	}
	
	.el-divider.el-divider--horizontal {
		margin: 0px
	}
	
</style>